<%@page import="java.io.PrintWriter"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Welcome to SmartFix WebSpace!</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!--     Fonts and icons     -->
    <!--<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">-->

	<!-- CSS Files -->
    <link href="html/css/bootstrap.min.css" rel="stylesheet" />
	<link href="html/css/gsdk-bootstrap-wizard.css" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="html/css/demo.css" rel="stylesheet" />
    <link href="html/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="html/css/message.css" rel="stylesheet"/>
    <!--图片上传模块css文件  -->
    <link href="html/css/common.css" type="text/css" rel="stylesheet"/>
    <link href="html/css/index.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div class="image-container set-full-height" style="background-image: url('html/image/wizard-city.jpg')">
    <!--   Creative Tim Branding   -->
    <a href="#">
         <div class="logo-container">
            <div class="logo">
                <img src="html/image/new_logo.png">
            </div>
            <div class="brand">
                欢迎！
            </div>
        </div>
    </a>
    
    <!--信息推送-->
    <%
    	String showMessage = "欢迎来到SmartFix注册页面！";
    	if(request.getAttribute("showMessage")!=null){
    		showMessage = (String)request.getAttribute("showMessage");
    		request.removeAttribute("showMesage");
    	}
     %>
    <div id="show" class="showmessage">
        <h3><%=showMessage %></h3>
    </div>

	<!--  Made With Get Shit Done Kit  -->
		<a href="<%=path %>/home.jsp" class="made-with-mk">
			<div class="brand">GK</div>
			<div class="made-with">Made with <strong>GSDK</strong></div>
		</a>

    <!--   Big container   -->
    <div class="container">
        <div class="row">
        <div class="col-sm-8 col-sm-offset-2">

            <!--      Wizard container        -->
            <div class="wizard-container">

                <div class="card wizard-card" data-color="orange" id="wizardProfile">
                <!-- 此处为form表单 -->
                    <form class="form-horizontal" role="form" action="register.action" method="post" enctype="multipart/form-data">
                        <!--        You can switch ' data-color="orange" '  with one of the next bright colors: "blue", "green", "orange", "red"          -->

                    	<div class="wizard-header">
                        	<h3>
                        	   <b>Build</b>个人资料 <br>
                        	   <small>请让我们了解更多关于您的信息！</small>
                        	</h3>
                    	</div>

						<div class="wizard-navigation">
							<ul>
	                            <li><a href="#about" data-toggle="tab">登录信息</a></li>
	                            <li><a href="#account" data-toggle="tab">个人详细信息</a></li>
	                            <li><a href="#address" data-toggle="tab">证件照上传</a></li>
	                        </ul>
						</div>

                        <div class="tab-content">
                            <div class="tab-pane" id="about">
                              <div class="row">
                                  <h4 class="info-text"> 让我们先从基本信息开始吧！</h4>

                                  <div class="col-sm-4 col-sm-offset-1">
                                     <div class="picture-container">
                                          <div class="picture">
                                              <img src="html/image/default-avatar.png" class="picture-src" id="wizardPicturePreview" title=""/>
                                              <input type="file" id="wizard-picture" name="mst_Avatar">
                                          </div>
                                          <h6>选择头像</h6>
                                      </div>
                                  </div>

                                  <div class="col-sm-6">
                                      <div class="form-group">
                                        <label>账 号：<small>(必填)</small></label>
                                        <input name="mst_Account" type="text" class="form-control" placeholder="手机/QQ/邮箱">
                                      </div>
                                      <div class="form-group">
                                        <label>密 码：<small>(必填)</small></label>
                                        <input name="mst_Password" type="password" class="form-control" placeholder="6-20个字符（字母、数字、符号）">
                                      </div>
                                  </div>
                                  <div class="col-sm-10 col-sm-offset-1">
                                      <div class="form-group">
                                          <label>邮箱:<small>(必填)</small></label>
                                          <input name="mst_Email" type="email" class="form-control" placeholder="SmartFix@xxx.com">
                                      </div>
                                  </div>
                              </div>
                            </div>

                            <!--此处为师傅注册表单-->
                            <div class="tab-pane" id="account">
                                <div style="height:300px;overflow:auto;overflow-x: hidden">
                                    <h4 class="info-text">请完善您的个人信息！ </h4>
                                    
                                        <div class="form-group">
                                            <div style="margin:0px 100px 0px 100px ">

                                               <div class="form-group">
                                                   <label for="name"><strong>姓名:</strong><small>(必填)</small></label>
                                                   <input type="text" name="mst_Name" id="name" class="form-control" placeholder="name">
                                               </div>

                                               <div class="form-group">
                                                    <label for="sex"><strong>性别:</strong></label>
                                                    <input type="text" name="mst_Sex" id="sex" class="form-control" placeholder="sex">
                                               </div>

                                                <div class="form-group">
                                                    <label for="mobilePhone"><strong>手机号:</strong><small>(必填)</small></label>
                                                    <input type="text" name="mst_Mphone" id="mobilePhone" class="form-control" placeholder="mobilePhone">
                                                </div>

                                                <div class="form-group input-append date" id="datetimepicker" data-date="2012-12-02" data-date-format="yyyy-mm-dd">
                                                    <label for="age"><strong>出生日期:</strong><small>(必填)</small></label>
                                                    <input type="text" name="mst_birthday" id="age" class="form-control" placeholder="年/月/日" readonly>
                                                    <span class="add-on"><i class="icon-th"></i></span>
                                                </div>

                                                <div class="form-group">
                                                    <label><strong>从事维修行业类型:</strong><small>(必填)</small></label>
                                                    <select class="form-control" name="mst_Trade">
                                                        <option>水龙头、马桶等维修安装</option>
                                                        <option>电线、灯关等维修安装</option>
                                                        <option>冰箱、空调等维修保养</option>
                                                        <option>下水管道、抽烟机等疏通</option>
                                                        <option>其他故障</option>
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label><strong>所处城市:</strong><small>(必填)</small></label>
                                                    <select class="form-control" name="mst_City">
                                                        <option>广东</option>
                                                        <option>北京</option>
                                                        <option>上海</option>
                                                        <option>浙江</option>
                                                        <option>江西</option>
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label><strong>技工证书:</strong><small>(必填)</small></label>
                                                    <div style="background:#ebebeb;border-radius: 5px;padding: 5px;">
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Certificate">设备点检资格证书
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Certificate">维修电工职业资格证
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Certificate">设备管理检测员资格证
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Certificate">设备管理检测员资格证
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label for="ID NB"><strong>身份证号:</strong><small>(必填)</small></label>
                                                    <input type="text" name="mst_IdCNb" id="ID NB" class="form-control" placeholder="National Identification Number">
                                                </div>

                                                <div class="form-group">
                                                    <label for="addr"><strong>详细居住地:</strong><small>(必填)</small></label>
                                                    <input type="text" name="mst_Address" id="addr" class="form-control" placeholder="Live in detail">
                                                </div>

                                                <div class="form-group">
                                                    <label><strong>技能领域:</strong><small>(必填)</small></label>
                                                    <div style="background:#ebebeb;border-radius: 5px;padding: 5px;">
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Speciality">家电维修
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Speciality">空调维修
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Speciality">热水器维修
                                                            </label>
                                                        </div>
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox" value="" name="mst_Speciality">洗衣机维修
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                </div>
                            </div>

                            <!--此处为师傅端相关照片的上传-->
                            <div class="tab-pane" id="address">
                                <h4 class="info-text"> 最后只需上传证件照了！</h4>
                                <div style="height:300px;overflow:scroll;">
                                    <div class="form-group">
                                        <div class="img-box full">
                                            <section class=" img-section">
                                                <p class="up-p">此处为证件照上传：<small>(最多可以上传5张图片!)</small></p>
                                                <div class="z_photo upimg-div clear" >
                                                    <section class="z_file fl">
                                                        <img src="html/image/a11.png" class="add-img">
                                                        <input type="file" name="smt_IDPhoto" id="file" class="file" value="" accept="html/image/jpg,html/image/jpeg,html/image/png,html/image/bmp" multiple />
                                                    </section>
                                                </div>
                                            </section>
                                        </div>
                                        <aside class="mask works-mask">
                                            <div class="mask-content">
                                                <p class="del-p">您确定要删除作品图片吗？</p>
                                                <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                                            </div>
                                        </aside>
                                    </div>


                                    <div class="form-group">
                                        <div class="img-box full">
                                            <section class=" img-section">
                                                <p class="up-p">此处为营业执照上传：<small>(最多可以上传5张图片!)</small></p>
                                                <div class="z_photo upimg-div clear" >
                                                    <section class="z_file fl">
                                                        <img src="html/image/a11.png" class="add-img">
                                                        <input type="file" name="mst_Charter" id="file1" value="" class="file"accept="html/image/jpg,html/image/jpeg,html/image/png,html/image/bmp" multiple />
                                                    </section>
                                                </div>
                                            </section>
                                        </div>
                                        <aside class="mask works-mask">
                                            <div class="mask-content">
                                                <p class="del-p">您确定要删除作品图片吗？</p>
                                                <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                                            </div>
                                        </aside>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="wizard-footer height-wizard">
                            <div class="pull-right">
                                <input type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' name='next' value='下一步' />
                                <input type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='完成' />
                            </div>

                            <div class="pull-left">
                                <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='返回' />
                            </div>
                            <div class="clearfix"></div>
                        </div>

                    </form>
                </div>
            </div> <!-- wizard container -->
        </div>
        </div><!-- end row -->
    </div> <!--  big container -->

    <div class="footer">
        <div class="container">
             <!--made with <i class="fa fa-heart heart"></i> by <a href="#">Creative Tim</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>-->
        </div>
    </div>

</div>

</body>

	<!--   Core JS Files   -->
	<script src="html/js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="html/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="html/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

	<!--  Plugin for the Wizard -->
	<script src="html/js/gsdk-bootstrap-wizard.js"></script>

	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="html/js/jquery.validate.min.js"></script>
    <!--日期控件-->
    <script type="text/javascript" src="html/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="html/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="html/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="html/js/imgUp.js"></script>
   	<script type="text/javascript" src="html/js/message.js"></script>
    <script>
    	/* 此处为div向上隐藏  */
	    window.onload = function(){
	            messageMove(document.getElementById("show"),-61);
	    }
	    /*  */
        $('.date').datetimepicker({
            minView: 'month',            //设置时间选择为年月日 去掉时分秒选择
            format:'yyyy-mm-dd',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1,
            language: 'zh-CN'              //设置时间控件为中文
        });
        $(document).ready(function(){
            setTimeout(function(){
                $("#show").fadeToggle(3000);
            },2000)
        });
    </script>
</html>


